<template lang="pug">
  .global-container
    .global-container-header
      .title 用户管理
      .tools
        .search-input
          i.iconfont.icon-sousuo
          input(placeholder="用户名", v-model="userName")
        .btn.btn-search(@click="search") 查询
        .btn.btn-add(@click="$router.push('/edit-user')") 新增
    .global-container-content
      .content-header
        div 用户名
        div 手机号
        div 邮箱
        div 性别
        div 操作
      .content-body(v-if="userInfoList.length")
        .content-item(v-for="item in userInfoList")
          div {{item.userName}}
          div {{item.userPhone}}
          div {{item.userEmail}}
          div {{item.userSex}}
          div 操作
      template(v-if="userInfoList.length")
        QuickPager(:page="page")
      template(v-else)
        Empty(:searched="true")
</template>

<script>
export default {
  data () {
    return {
      userName: '',
      userInfoList: [],
      page: {
        startIndex: 0,
        pageRows: 10,
        totalRows: 0,
        currentPage: 1
      }
    }
  },
  methods: {
    search () {
      this.page = {
        startIndex: 0,
        pageRows: 10,
        totalRows: 0,
        currentPage: 1
      }
      this.init()
    },
    async init () {
      const {data, more} = (await this.$http.post('/manage/user/list', {
        userName: this.userName,
        page: this.page
      })).data
      this.userInfoList = data
      this.page = more
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style>
</style>
